<template>
  <div class="business-chart" style="position: relative">
    <div class="chart-header">
      <div class="chart-title">
<!--        <span class="title-icon">💎</span>-->
<!--        <span class="title-text">{{ currentTitle }}</span>-->
<!--        <span class="more-link">更多</span>-->
      </div>

      <div class="chart-tabs">
        <button
            class="tab-button"
            :class="{ active: activeTab === 'bar' }"
            @click="switchTab('bar')"
        >
          重点业务空间线
        </button>
        <span class="tab-separator">|</span>
        <button
            class="tab-button"
            :class="{ active: activeTab === 'line' }"
            @click="switchTab('line')"
        >
          近七日业务量
        </button>
      </div>
    </div>
    <div  v-if="activeTab == 'line'" style="color: #ccc;  position: absolute;right: 15px;top: 44px;font-size: 12px;z-index:100000;" @click="allData">{{name}}</div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BusinessChart',
  props:['data','data2','data3'],
  created(){
    this.lineData.dates = this.$props.data.date;
    this.lineData.series = this.$props.data.data;
    this.barData.dates = this.$props.data2.date;
    this.barData.series = this.$props.data2.data;
  },
  data() {
    return {
      name:"更多",
      activeTab: 'bar',
      chart: null,
      lineData: {
        dates: ['6.10', '6.11', '6.12', '6.13', '6.14', '6.15', '6.16', '6.17', '6.18'],
        series: [
          {
            name: '客户',
            data: [300, 350, 400, 380, 450, 520, 600, 680, 750],
            color: '#00d4aa'
          },
          {
            name: '爱家光网',
            data: [200, 280, 320, 350, 400, 480, 550, 620, 680],
            color: '#4a90e2'
          },
          {
            name: '线盒',
            data: [400, 420, 380, 450, 500, 580, 650, 720, 800],
            color: '#f5a623'
          },
          {
            name: '重点产品',
            data: [250, 300, 280, 320, 380, 450, 520, 580, 650],
            color: '#bd10e0'
          }
        ]
      },
      barData: {
        dates: ['客户', '爱家光网', '线盒', '会员权益', '数字视听', '大屏点播', '宽带提速','云安防','升档'],
        series: [
          {
            name: '新增客户',
            data: [120, 150, 180, 200, 160, 140, 190,10,20],
            color: '#00d4aa'
          },
        ]
      }
    }
  },
  computed: {
    currentTitle() {
      return this.activeTab === 'line' ? '重点业务空间线' : '近七日业务量'
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    allData(){
      if(this.name == '更多') {
        this.lineData.dates = this.$props.data3.date;
        this.lineData.series = this.$props.data3.data;
        this.updateChart()
        this.name = '返回'
      }else if(this.name=="返回") {
        this.lineData.dates = this.$props.data.date;
        this.lineData.series = this.$props.data.data;
        this.updateChart()
        this.name = '更多'
      }

    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.updateChart()
    },

    switchTab(tab) {
      this.activeTab = tab
      this.updateChart()
    },

    updateChart() {
      if (!this.chart) return

      const option = this.activeTab === 'line' ? this.getLineOption() : this.getBarOption()
      this.chart.setOption(option, true)
    },

    getLineOption() {
      return {
        backgroundColor: 'transparent',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: this.lineData.series.map(s => s.name),
          top: '5%',
          right: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 4,
          itemGap: 20
        },
        xAxis: {
          type: 'category',
          data: this.lineData.dates,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 11
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 11
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: this.lineData.series.map(item => ({
          name: item.name,
          type: 'line',
          data: item.data,
          smooth: true,
          lineStyle: {
            color: item.color,
            width: 2
          },
          itemStyle: {
            color: item.color,
            borderWidth: 2,
            borderColor: '#fff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: item.color + '40' },
                { offset: 1, color: item.color + '10' }
              ]
            }
          },
          symbol: 'circle',
          symbolSize: 6,
          emphasis: {
            scale: true,
            scaleSize: 8
          }
        }))
      }
    },

    getBarOption() {
      return {
        backgroundColor: 'transparent',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: 'rgba(255, 255, 255, 0.2)',
          formatter: function(params) {
            return params[0].name + '<br/>' + '<span style="color: #00d4aa"> '+ params[0].seriesName+'</span>' + '：' + params[0].value + "%"
          },
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: this.barData.series.map(s => s.name),
          top: '5%',
          right: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 4,
          itemGap: 20
        },

        xAxis: {
          type: 'category',
          data: this.barData.dates,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 11
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          max:100,
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 11
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: this.barData.series.map(item => ({
          name: item.name,
          type: 'bar',
          data: item.data,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: item.color },
                { offset: 1, color: item.color + '80' }
              ]
            },
            borderRadius: [2, 2, 0, 0]
          },
          barWidth: '20%',
          emphasis: {
            itemStyle: {
              color: item.color
            }
          }
        }))
      }
    },

    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.business-chart {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 16px;
}

.title-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.more-link {
  color: #4a90e2;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
}

.more-link:hover {
  color: #357abd;
}

.chart-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

.tab-button.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.tab-separator {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.chart-container {
  width: 100%;
  height: 300px;
}

@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .chart-container {
    height: 250px;
  }

  .chart-tabs {
    flex-wrap: wrap;
  }
}
</style>